<template>
  <div>
    <!-- 测试消息提示组件 -->
    <XtxMessage text="警告" type="warn" />
    <!-- <XtxMessage text="错误" type="error"/> -->
    <!-- <XtxMessage text="成功" type="success"/> -->
    <div class="box"></div>
    <div class="boox"></div>
    <button @click="open">测试</button>
    <h1>{{count}}</h1>
    <button @click="start">开始</button>
    <button @click="pause">关闭</button>
  </div>
</template>

<script>
import { onMounted, render, createVNode } from 'vue'
// 优先导入index.vue => <script setup> 优先导入index.js
import { message } from '@/components/Message/index.js'
// import { useIntervalFn } from '@vueuse/core'

import { useCountDown } from '@/hooks/index'
export default {
  setup () {
    /**
       * 了解虚拟DOM (假DOM) 的创建和渲染 (变成真实DOM)
       * 1- 导入createVNode方法 => 创建虚拟DOM
       * 2- 导入render方法 => 渲染创建虚拟DOM
       */
    onMounted(() => {
      // 创建html虚拟DOM元素
      const h1 = createVNode('h1', { class: 'red' }, ['我是子元素'])
      render(h1, document.querySelector('.box'))
      // 创建自定义组件 .vue的虚拟DOM元素
    //   const msg = createVNode(Message, { type: 'error', text: '我是虚拟DOM创建的' })
    //   render(msg, document.querySelector('.boox'))
    //   console.log(msg.component.setupState.isShow)
    //   msg.component.setupState.isShow = true
    //   setTimeout(() => {
    //     msg.component.setupState.isShow = false
    //   }, 5000)
    })

    const open = () => {
      message({ text: '我真帅', type: 'error', time: 3000 })
    }

    // const count = ref(60)
    // const { pause, resume } = useIntervalFn(() => {
    //   count.value--
    //   if (count.value <= 0) {
    //     pause()
    //   }
    // }, 1000, {
    //   immediate: false
    // })
    const { count, pause, start } = useCountDown(10)
    return { open, pause, count, start }
  }
}
</script>

<style lang="less" scoped>
</style>
